<template>
  <div>
    <tableComponents
      :isShow="false"
      @toAdd="addNews"
      :isHaveExport="false"
      :isHavePagination="false"
    >
      <template v-slot:table>
        <el-table
          ref="multipleTable"
          :data="list"
          header-row-class-name="head_color"
          stripe
          v-loading="loading"
          tooltip-effect="dark"
          style="width: 99.9%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column label="角色名称" min-width="150">
            <template slot-scope="scope">{{ scope.row.role_name }}</template>
          </el-table-column>

          <el-table-column label="角色描述" min-width="100">
            <template slot-scope="scope">{{ scope.row.role_desc }}</template>
          </el-table-column>

          <el-table-column label="添加时间" min-width="150">
            <template slot-scope="scope">{{
              scope.row.created_time | getTimeFormat
            }}</template>
          </el-table-column>

          <el-table-column label="更新时间" min-width="150">
            <template slot-scope="scope">{{
              scope.row.update_time | getTimeFormat
            }}</template>
          </el-table-column>

          <el-table-column label="操作" min-width="150">
            <template slot-scope="scope">
              <el-button
                :loading="$store.state.isLoading"
                size="mini"
                @click="updateNews(scope.row.id, scope.row.role_name)"
                >编辑</el-button
              >
              <el-button
                :loading="$store.state.isLoading"
                size="mini"
                @click="update_user(scope.row)"
                >编辑用户管理</el-button
              >
              <el-button
                :loading="$store.state.isLoading"
                size="mini"
                @click="deleteNews(scope.row.id)"
                type="danger"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
    </tableComponents>

    <el-dialog
      title="用户管理权限"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :visible="user_show"
      :before-close="closeDialog"
      @close="$emit('update:show', false)"
      class="tl size_13"
      width="800px"
    >
      <el-form
        :model="edit_form"
        ref="data"
        class="mar_top"
        label-width="120px"
      >
        <el-form-item label="用户权限管理：" prop="role_id">
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          <el-checkbox-group v-model="checkList">
            <el-checkbox
              :label="item"
              v-for="(item, k) in options"
              :key="k"
            ></el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <div class="mar_bottom_15">
          <span class="sizeColor size_13 sp_style"></span>
          <el-button
            :loading="$store.state.isLoading"
            size="medium"
            type="primary"
            @click.prevent="addSave('data')"
            >确定</el-button
          >
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      options: [],
      isIndeterminate: true,
      checkAll: false,
      checkList: [],
      edit_form: {},
      user_show: false,
      user_limit: [],
      loading: false,
      show: false,
      myshow: false,
      list: [],
      rewardId: "",
    };
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkList = val ? this.options : [];
      this.isIndeterminate = false;
    },
    addSave() {
      let str = "";
      if (this.checkList != undefined && this.checkList.length > 0) {
        this.checkList.forEach((item) => {
          str = str + item + "@";
        });
      }
      this.edit_form.role_con_user = str;
      let params = this.edit_form;

      this.$api.getAdmin.add_roleedit(params).then((res) => {
        if (res.data.code == 200 && res.data.result != null) {
          this.$fnc.alertSuccess({
            text: "修改成功",
          }); //成功弹出框
          this.edit_form = {};
          this.user_show = false;
          this.getNewsAll();
        } else {
          this.$fnc.alertError(res.data.result); //失败弹出框
        }
      });
    },
    closeDialog() {
      this.$refs["data"].resetFields();
      this.edit_form = {};
      this.user_show = false;
    },
    update_user(info) {
      this.user_show = true;
      this.edit_form.id = info.id;
      this.checkList = info.role_con_user.split("@");
      this.checkList = this.checkList.filter((item) => {
        return item;
      });
    },
    addNews() {
      this.$store.commit("addbreadcrumbs", {
        title: "添加用户角色",
        url: `/index/admin/roleAdd`,
      });
      this.$router.push({ path: "/index/admin/roleAdd" });
    },
    updateNews(id, ti) {
      this.$store.commit("addbreadcrumbs", {
        title: "编辑用户角色",
        url: `/index/admin/roleEdit?id=${id}&title=${ti}`,
      });
      this.$router.push({
        path: "/index/admin/roleEdit",
        query: { id: id, title: ti },
      });
    },
    getNewsAll() {
      this.loading = true;
      var data = {};
      this.$api.getAdminuser.getRoleList(data).then((res) => {
        if (res.data.code == 200) {
          this.list = res.data.result;
        }
      });
      this.loading = false;
    },
    handleSwitch(val, id) {
      var params = {};
      params["id"] = id;
      val == true ? (params["show"] = 1) : (params["show"] = 0);
      this.$api.getAdminuser.changeRewardShow(params).then(() => {
        this.getNewsAll();
      });
    },
    deleteNews(id) {
      this.$swal({
        title: "您确定要删除这条信息吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思",
      }).then((willDelete) => {
        console.log(willDelete, 1);
        if (willDelete.value) {
          var data = { id };
          this.$api.getAdminuser.RoleDelete(data).then((res) => {
            if (res.data.code == 200) {
              this.$swal("删除成功！", "您已经删除了这条信息。", "success");
              this.getNewsAll("");
            } else {
              this.$swal("删除失败！", "出错啦！", "success");
            }
          });
        }
      });
    },
    reload() {
      this.getNewsAll();
    },
    handleSelectionChange() {},
  },
  beforeCreate() {
    this.loading = true; //数据未加载之前调用loading
  },
  created() {
    this.getNewsAll();
    this.loading = false;
    this.options = [
      "详情",
      "编辑",
      "删除",
      "实名认证",
      "收款信息",
      "设等级",
      "账户充减",
      "修改推荐人",
      "发送客服消息",
      "发送站内信",
      "重置密码",
      "重置支付密码",
      "重置二维码",
      "微信推广码",
      "H5推广码",
      "小程序二维码",
      "解除绑定",
    ];
    this.$api.getIndex.getIndex_limits({}).then((res) => {
      if (res.data.code == 200) {
        localStorage.setItem("limit", JSON.stringify(res.data.result)); //存入 参数： 1.调用的值 2.所要存入的数据
        this.$store.commit("setPlugin", res.data.result);
        this.is_open = res.data.result;
        if (this.is_open.gbfx && this.is_open.gbfx.is_open == 1) {
          this.options.push("代理商");
        }
        if (this.is_open.shbxt && this.is_open.shbxt.is_open == 1) {
          this.options.push("供应商");
        }
        if (this.is_open.zbcj && this.is_open.zbcj.is_open == 1) {
          this.options.push("申请主播");
        }
        if (this.is_open.gxgd && this.is_open.gxgd.is_open == 1) {
          this.open_btn.push("股东");
        }
      }
    });
  },
  computed: {},
  watch: {},
};
</script>
